import { useState, useEffect, useImperativeHandle, useRef, forwardRef } from "react";

// 2. 需要暴露子组件的数据，要用到高阶组件 forwordRed(callback)， callback里面包括 props, ref两个参数。
const MyUseImperativeHandle = forwardRef((props, ref) => {
  const input2 = useRef(null)
  const [value, setValue] = useState('');

  //3. 通过useImperativeHandle（），把return中的内容，暴露给ref对象。
  useImperativeHandle(
    ref,
    () => {
      // 把 返回的对象，绑定到父组件传入的ref对象的current属性上面。
      return {
        value,
        focus: () => input2.current.focus()
      }
    },
    // [value]
  )

  useEffect(() => {
    console.log(props);
  })
  return (
    <div>
      <input type="text" ref={input2} onChange={(e) => {
        setValue(e.target.value)
      }} />
    </div>
  )
})
export default MyUseImperativeHandle